<template>
  <el-dialog v-model="dialogVisible" title="详情" width="80%" :before-close="handleClose">
    <div>
      <FormCreate :rule="rule.data" :option="options" v-model="formData" v-model:api="fApi"></FormCreate>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleClose">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import {_getFormInfoById, _getOptionListByName, _getPersonId} from "../../http/api.js";
import {ElLoading, ElMessage} from "element-plus";
import formCreate from "@form-create/element-ui";
import {ref,reactive,onMounted} from "vue";
import {addField} from "../../utils/field.js";

const $emit = defineEmits(['showDetailsEmit'])
const props = defineProps({
  personId:String,
  templateId:String,
  type:String
})
const dialogVisible = ref(true);
//获取 formCreate 组件
const FormCreate = formCreate.$form();
const fApi = ref({});
const formData = ref({});
const options = ref({
  //表单提交事件
  submitBtn: false,
  form:{
    disabled: true,
    labelWidth: '200px'
  }
});

// 选择的字段
const rule = reactive({
  data:[]
})

// 获取模板字段详情
const getInfoById = () => {
  const loading = ElLoading.service({lock: true, text: 'Loading', background: 'rgba(0, 0, 0, 0.7)'})
  _getFormInfoById(props.templateId)
      .then(res => {
        console.log(res);
        loading.close();
        if(res.data.ok) {
          let item = res.data.data;
          let fieldTemplateList = item.fieldTemplateList;
          let types = [];
          for (let i = 0; i < fieldTemplateList.length; i++) {
            let item = fieldTemplateList[i];
            if(item.fieldType === 'select' || item.fieldType === 'radio') {
              types.push(item.fieldName)
            }
          }
          getOptionListByName(types.toString(),fieldTemplateList)
        }
      })
      .catch(err => {
        console.log(err);
        loading.close();
        ElMessage({message: '网络异常', type: 'error' });
      })
}
// 获取数据详情
const getPersonId = () => {
  _getPersonId(props.personId)
      .then(res => {
        console.log(res);
        if(res.data.ok) {
          let item = res.data.data.value;
          let address1 = [];
          let address2 = [];
          let address3 = [];
          let address4 = [];
          let address5 = [];
          let address6 = [];
          let address7 = [];
          let address8 = [];
          let address9 = [];
          let address10 = [];
          if(item.address1) {
            address1 = item.address1.split('-');
            item['address1'] = address1;
          }
          if(item.address2) {
            address2 = item.address2.split('-');
            item['address2'] = address2;
          }
          if(item.address3) {
            address3 = item.address3.split('-');
            item['address3'] = address3;
          }
          if(item.address4) {
            address4 = item.address4.split('-');
            item['address4'] = address4;
          }
          if(item.address5) {
            address5 = item.address5.split('-');
            item['address5'] = address5;
          }
          if(item.address6) {
            address6 = item.address6.split('-');
            item['address6'] = address6;
          }
          if(item.address7) {
            address7 = item.address7.split('-');
            item['address7'] = address7;
          }
          if(item.address8) {
            address8 = item.address8.split('-');
            item['address8'] = address8;
          }
          if(item.address9) {
            address9 = item.address9.split('-');
            item['address9'] = address9;
          }
          if(item.address10) {
            address10 = item.address10.split('-');
            item['address10'] = address10;
          }
          console.log(item);
          fApi.value.coverValue({ ... item });
        }
      })
      .catch(err => {
        console.log(err);
      })
}
onMounted(() => {
  getInfoById();
  getPersonId()
})
// 获取字段列表二级选项
const getOptionListByName = (typeString,list) => {
  const loading = ElLoading.service({lock: true, text: 'Loading', background: 'rgba(0, 0, 0, 0.7)'})
  _getOptionListByName(typeString)
      .then(res => {
        console.log(res);
        loading.close();
        if(res.data.ok) {
          let arr = res.data.data;
          console.log(arr);
          for (let j = 0; j < arr.length; j++) {
            for (let i = 0; i < list.length; i++) {
              if(arr[j].fieldType === list[i].fieldName) {
                let listData = arr[j].list;
                let arrList = [];
                listData.forEach(v => {
                  arrList.push({ label: props.type == 2 ?v.nameEn:v.name,value: v.value })
                })
                list[i]['optionsData'] = arrList;
              }
            }
          }
          list.forEach(v => {
            let config = addField(v.fieldType,{field:v.fieldName,title:v.notes},v.optionsData);
            config.effect.required = (v.isFlag === '0');
            rule.data.push(config)
          })
          fApi.value.refreshOptions();
          console.log(rule.data);
        }
      })
      .catch(err => {
        console.log(err);
        loading.close();
        ElMessage({message: '网络异常', type: 'error' });
      })
}
//关闭弹框
const handleClose = () => {
  $emit('showDetailsEmit')
}
</script>

<style scoped lang="scss">

</style>